@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
* { margin: 0 auto; padding: 0; vertical-align: top; }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img { border: 0; max-width: 100%; }
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
body { background: #FFF; font-family:  'Nanum Gothic', Tahoma,'Jeju Gothic',"Malgun Gothic", Qrial, sans-serif;  }






#wrap {
width: 1200px;
margin: 0 auto;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #FFF;
}


/* ===================================================
   🔹 »ó´Ü ¹è³Ê Àüü ¿µ¿ª
   ✔ header¿Í ºÐ¸®µÈ µ¶¸³ ¿µ¿ª
   ✔ ¹ÝÀÀÇü + Áß¾ÓÁ¤·Ä + ÁÙ¹Ù²Þ ¹æÁö
=================================================== */
#cp_top_banner {
  text-align: center;                /* ÅؽºÆ® °¡¿îµ¥ Á¤·Ä */
  white-space: nowrap;               /* ÁÙ¹Ù²Þ ¹æÁö (¸ð¹ÙÀÏ¿¡¼­µµ ÇÑÁÙ À¯Áö) */
  font-weight: 900;                  /* ±ÛÀÚ µÎ²² (°­Á¶ ´À³¦) */


  /* ¹ÝÀÀÇü ÆùÆ® Å©±â
     ÃÖ¼Ò 20px ~ ÃÖ´ë 40px »çÀÌ ÀÚµ¿ Á¶Àý */
  font-size: clamp(20px, 2.8vw, 40px);


  font-family: 'Noto Sans KR', sans-serif !important; /* Ä«Æä24 ÆùÆ® µ¤¾î¾²±â ¹æÁö */
  letter-spacing: -0.5px;            /* ÀÚ°£ »ì¦ ÁÙ¿©¼­ ºÙ´Â ´À³¦ */


  padding: 10px 0;                  /* À§¾Æ·¡ ¿©¹é (header¿Í °£°Ý È®º¸) */


  background: #f8f8f8;              /* ¹è³Ê ¹è°æ»ö (¿µ¿ª ±¸ºÐ¿ë) */
  border-bottom: 1px solid #ddd;    /* header¿Í ±¸ºÐ ¶óÀÎ */


  overflow: visible;                /* ÅؽºÆ® À߸² ¹æÁö */
}


/* ===================================================
   🔹 Á¿ì ÀÏ¹Ý ÅؽºÆ® ¿µ¿ª
   ✔ °­Á¶µÇÁö ¾ÊÀº ÅؽºÆ®
=================================================== */
#cp_top_banner .tb_left,
#cp_top_banner .tb_right {
  color: #333333;                  /* ±âº» ÅؽºÆ® »ö»ó */
}


/* ===================================================
   🔹 °¡¿îµ¥ °­Á¶ ÅؽºÆ® (ÇÙ½É ¿µ¿ª)
   ✔ ¹è°æ + ¿Ü°û¼± + ¾Ö´Ï¸ÞÀÌ¼Ç Àû¿ë
=================================================== */
#cp_top_banner .tb_center {


  /* ±ÛÀÚ »ö»ó (³ë¶û ¡æ °­Á¶¿ë) */
  color: #ffe600;


  /* -----------------------------
     🔹 ¹è°æ °­Á¶
     ±ÛÀÚ µÚ¿¡ ÆĶõ ¹Ú½º »ý¼º
  ----------------------------- */
  background: #2a6fdb;             /* ±âº» ºí·ç »ö»ó */


  padding: 4px 12px;              /* ±ÛÀÚ¿Í ¹è°æ »çÀÌ ¿©¹é */
  border-radius: 6px;             /* ¸ð¼­¸® µÕ±Û°Ô (ÀÚ¿¬½º·´°Ô) */


  display: inline-block;          /* ¹è°æÀÌ ±ÛÀÚ Å©±â¿¡ ¸Â°Ô Àû¿ëµÇµµ·Ï */


  margin: 0 10px;                 /* Á¿ì ÅؽºÆ®¿Í °£°Ý */


  /* -----------------------------
     🔹 ¿Ü°û¼± È¿°ú (À̹ÌÁö ´À³¦ ±¸Çö)
     text-stroke ´ë½Å shadow·Î ±¸Çö
     ¡æ ÇÑ±Û ±úÁü ¹æÁö
  ----------------------------- */
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px -2px 0 #000,
     0px  2px 0 #000,
    -2px  0px 0 #000,
     2px  0px 0 #000;


  /* -----------------------------
     🔹 ¾Ö´Ï¸ÞÀÌ¼Ç Àû¿ë
     ✔ ¹è°æ + ÅؽºÆ® °°ÀÌ ±ôºýÀÓ
     ✔ !important ¡æ Ä«Æä24 Ãæµ¹ ¹æÁö
  ----------------------------- */
  animation: flashBg 1s infinite !important;
}


/* ===================================================
   🔹 ±ôºýÀÓ ¾Ö´Ï¸ÞÀ̼Ç
   ✔ GIF ´À³¦ ÀçÇö
   ✔ ¹è°æ»ö + ¹à±â µ¿½Ã¿¡ º¯È­
=================================================== */
@keyframes flashBg {


  /* ±âº» »óÅ */
  0% {
    opacity: 1;                    /* ¿ÏÀü ¼±¸í */
    filter: brightness(1);         /* ±âº» ¹à±â */
    background: #2a6fdb;           /* ±âº» ºí·ç */
  }


  /* Áß°£ »óÅ (°­Á¶) */
  50% {
    opacity: 0.7;                  /* »ì¦ Åõ¸í */
    filter: brightness(1.6);       /* ¹à±â Áõ°¡ ¡æ ¹ø½ÀÓ È¿°ú */
    background: #1e4fb5;           /* ´õ ÁøÇÑ ºí·ç */
  }


  /* ´Ù½Ã ¿ø»ó º¹±Í */
  100% {
    opacity: 1;
    filter: brightness(1);
    background: #2a6fdb;
  }
}


/* ===================================================
   🔹 Áß¾Ó ¹è³Ê Àüü
=================================================== */
#center_banner {
  text-align: center;
  background: #0f3d2e;                /* ´ÙÅ©±×¸° */
  padding: 30px 0;
  font-family: 'Noto Sans KR', sans-serif !important;
}


/* ===================================================
   🔹 °øÅë ÅؽºÆ®
=================================================== */
#center_banner p {
  margin: 0;
  font-weight: 900;
  line-height: 1.4;
}


/* ===================================================
   🔹 1ÁÙ (Å« ÅؽºÆ®)
=================================================== */
#center_banner .cb_line1 {
  font-size: clamp(28px, 3.5vw, 60px);


  /* ¾Ö´Ï¸ÞÀÌ¼Ç */
  animation: line1_show 2.8s infinite;
  animation-timing-function: ease-out; /* ºÎµå·¯¿î ³¡ ó¸® */
}


/* ===================================================
   🔹 2ÁÙ (¼­ºê ÅؽºÆ®)
=================================================== */
#center_banner .cb_line2 {
  font-size: clamp(22px, 3vw, 60px);
  margin-top: 8px;


  /* ¾Ö´Ï¸ÞÀÌ¼Ç */
  animation: line2_show 2.8s infinite;
  animation-timing-function: ease-out;
}


/* ===================================================
   🔹 ±âº» ÅؽºÆ®
=================================================== */
#center_banner .cb_normal {
  color: #ffffff;
}


/* ===================================================
   🔹 °­Á¶ »ö»ó
=================================================== */
#center_banner .cb_red {
  color: #ff3b3b;
}


#center_banner .cb_yellow {
  color: #ffe600;
}


#center_banner .cb_orange {
  color: #ff8c00;
}


/* ===================================================
   🔹 1ÁÙ ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¾Æ·¡¿¡¼­ ÀÚ¿¬½º·´°Ô ¿Ã¶ó¿À¸ç µîÀå
=================================================== */
@keyframes line1_show {
  0% {
    opacity: 0;
    transform: translateY(12px);  /* ¾Æ·¡¿¡¼­ ½ÃÀÛ */
  }


  20% {
    opacity: 1;
    transform: translateY(0);     /* ÀÚ¿¬½º·´°Ô ¿Ã¶ó¿È */
  }


  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===================================================
   🔹 2ÁÙ ¾Ö´Ï¸ÞÀ̼Ç
   ✔ 1ÁÙ ÀÌÈÄ µîÀå
=================================================== */
@keyframes line2_show {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }


  40% {
    opacity: 0;
    transform: translateY(12px);  /* ´ë±â */
  }


  65% {
    opacity: 1;
    transform: translateY(0);     /* µîÀå */
  }


  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ===================================================
   🔹 ÇÏ´Ü ¹è³Ê Àüü ¿µ¿ª
   ✔ footer À§ À§Ä¡
   ✔ 3ºÐÇÒ ±¸Á¶
   ✔ ÁÂ¿ì ¿©¹é Å©°Ô / Áß°£ °£°Ý Á¼°Ô
=================================================== */
#bottom_banner {
  display: flex;
  justify-content: center;


  gap: 10px;                /* Áß°£ °£°Ý */
  padding: 20px 40px;       /* ÁÂ¿ì ¿©¹é Å©°Ô */


  background: #ffffff;
}


/* ===================================================
   🔹 °¢ ¹Ú½º °øÅë ½ºÅ¸ÀÏ
=================================================== */
#bottom_banner .bb_item {
  flex: 1;
  text-align: center;


  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 60px);
  font-family: 'Noto Sans KR', sans-serif !important;


  padding: 14px 0;
  border-radius: 8px;
}


/* ===================================================
   🔹 »ö»ó ¼³Á¤
=================================================== */


/* 1¹ø: ´ë´ÜÁö (ûº¸¶ó + ¿¤·Î¿ì) */
#bottom_banner .bb_1 {
  background: #51138a;
  color: #ffe600;
}


/* 2¹ø: Àڰݹ« (¹ÎÆ® + È­ÀÌÆ® ¡æ ¿äû ¼öÁ¤ ¹Ý¿µ: ¿ÍÀÎÅæ ÅؽºÆ®) */
#bottom_banner .bb_2 {
  background: #28ebbd;
  color: #7a1f2b;
}


/* 3¹ø: ¼±Âø¼ø (´ÙÅ©±×¸° + È­ÀÌÆ®) */
#bottom_banner .bb_3 {
  background: #1f4d3a;
  color: #ffffff;
}


/* ===================================================
   🔹 ¾Ö´Ï¸ÞÀÌ¼Ç °øÅë ¼³Á¤
   ✔ Àüü È帧 µ¿ÀÏÇÏ°Ô ¸ÂÃã
=================================================== */
#bottom_banner .bb_1,
#bottom_banner .bb_2,
#bottom_banner .bb_3 {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


/* ===================================================
   🔹 1¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¸ÕÀú µîÀå ¡æ °è¼Ó À¯Áö
=================================================== */
#bottom_banner .bb_1 {
  animation-name: bb_step1;
}


@keyframes bb_step1 {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }   /* ³¡±îÁö À¯Áö */
}


/* ===================================================
   🔹 2¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ µÎ¹ø° µîÀå
=================================================== */
#bottom_banner .bb_2 {
  animation-name: bb_step2;
}


@keyframes bb_step2 {
  0%   { opacity: 0; }
  25%  { opacity: 0; }
  35%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }
}


/* ===================================================
   🔹 3¹ø ¾Ö´Ï¸ÞÀ̼Ç
   ✔ ¸¶Áö¸· µîÀå ¡æ Àüü ¿Ï¼º
=================================================== */
#bottom_banner .bb_3 {
  animation-name: bb_step3;
}


@keyframes bb_step3 {
  0%   { opacity: 0; }
  50%  { opacity: 0; }
  60%  { opacity: 1; }   /* µîÀå */
  100% { opacity: 1; }
}






/* #header */
#header {
width: 100%; height: auto; margin:0 auto; 
}
#m_top{display:none; width:100%; height: 5px; background:#333;}
#logo {
display:block;
width: 100%;
background: #333;
 text-align: center; 
}
#logo2 {
display: none; width: 100%; overflow: hidden; background:#FFF;
}
.logo2_button { float: left; width:20%; margin:top 0; text-align:center;  } 
.logo2_text {float: left; width: 60%; left: 0 ; }
.logo2_tel { float: left; width:20%; margin:top 0; text-align:center;  } 






#top_tel{
width: 100%;
height: 100px;
margin-top: 20px;
margin: 0 auto;
background:#ffc107;
line-height:100px;
text-align:center;
}
#top_tel a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: bold;
font-style: normal;
line-height:100px;
}
#top_tel a span{
font-weight: bold;  font-size: 0.7em; 
}






#nav {
background:#030066;
width: 100%;
}
#nav ul { overflow: hidden; }
#nav ul li {
float: left;
width: 20%;
}
#nav ul li a {
display: block;
padding: 15px 0;
font-size: 2em; /* 18 / 16 */
color: #FFF;
text-align: center;
font-weight: bold;
}


#nav ul li a:hover {
color: #FFF;
background: #333;
}


/* #s_nav */


#s_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 20px;  position: absolute; z-index: 999; top: 0; left:-300px; background:#030066; }
.snav_no { text-align: right; margin-right: 5px; }
h1 { font-size: 1.250em; line-height: 1.7em; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #FFF; text-shadow:1px 1px 1px rgb(0,0,0); behavior:url('www/base/img/homepage/PIE-1.0.0/PIE.htc'); text-align: center;}
#snav {display: block; }
#snav>ul{ width: 234px; margin: 0 auto; }
#snav > ul>li{ height:30px; border-top: 1px solid #817EE4;  ;}
#snav >ul> li > a { display: block; line-height: 30px; padding-left: 18px; font-size: 1em; color: #FFF; text-decoration: none;}


#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 800; background: transparent;  display:none;}




#img_box {
position: relative;
}






/* #contents */




#contents {
width: 1200px;
margin: 0 auto;
}


#title_top{
width: 100%; 
height: 100px;
margin: 0 auto;
background: #120A2A;
}


.title_top{
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
line-height: 100px;
}




#title{
width: 100%; 
background: #030066;
}
.title {
line-height:100px;
text-align: center;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
}
#content_img{
width: 100%; 
margin: 0 auto;
background: #FFF;
}








/*main-contents*/


#mainbn{ width: 100%; overflow: hidden; margin-top:30px; margin-bottom: 10px; background:#FFF;}
#main-left{width:40%; float: left; margin-left: 7.5%; margin-right:2.5%; }
#main-right{width:40%; float: left; margin-left: 2.5%; margin-right:7.5%; }




#main-title{ 
text-align:center;
 float: none;
width: 100%; 
height: 100px;
background:#030066;
}


#main-title a{
text-align: center;
line-height:100px;
font-size: 3em;
color: #FFF;
font-weight: bold;
font-style: normal;
}
#main-content_img{
 float: none;
width:100%;
}


#content_img img{
margin-top: 5px;
margin-bottom:5px;
}


/*#community*/


#community{
top:150px; right:350px; width: 100%;   margin:0 auto;
clear: both;
}
#footer {
padding: 10px 0;
text-align: center;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
margin: 0 auto;
line-height:60px;
text-align:center;
}
.footer a{
text-align: center;
font-size: 2em;
color: #000;
font-weight: normal;
font-style: normal;
padding: 10px;
height: 60px;
line-height:60px;
}








/*media*/
@media screen and (max-width: 1200px) {
#wrap { width: 100%; border-left: none; border-right: none; }
#contents { width: 100%;}
#nav ul li a { font-size:1.5em;}
}


@media screen and (max-width:768px) {
#top_tel a{font-size: 1.5em; height: 60px;}
#top_tel a span{font-size: 0.7em; line-height:60px }
#title{height:auto; height: 60px;}
.title{font-size: 1.5em;  line-height: 60px;}
#text_box { top: 40px; right: 45px; }
.text_box3 { display: none; }
#main-left{width:47%; float: left; margin-left: 0.5%; margin-right:2.5%; }
#main-right{width:47%; float: left; margin-left: 2.5%; margin-right:0.5%; }
#main-title a{font-size: 1.5em;line-height: 60px;}
#main-title{ height: auto;}
}
@media screen and (max-width: 750px) {
#nav ul li a { font-size:1em;}
}
@media screen and (max-width: 550px) {
#mainbn{ width: 100%; overflow: hidden; margin-top:15px; }
#main-title a{font-size: 1.5em;line-height: 40px;}
#m_top{display:block;}
#logo{display:none;}
#logo2{display:block;}
#top_tel { height: 40px;}
#top_tel a{font-size: 1em; line-height: 40px; font-weight: bold;}
#top_tel a span{font-size: 0.7em; line-height:40px; }
#nav {display:none;}
}